」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JavaScript 中的互動:“警報”、“提示”和“確認”

JavaScript 中的互動:“警報”、“提示”和“確認”

發佈於2024-11-16
瀏覽:773

Interaction in JavaScript: `alert`, `prompt`, and `confirm`

****

歡迎回到我們的 JavaScript 世界之旅!在這篇文章中,我們將探討在 JavaScript 中與使用者互動的三種基本方法:alertpromptconfirm。這些方法分別允許您顯示訊息、收集使用者輸入和確認操作。讓我們深入研究每種方法並看看它們是如何工作的。

1. 警報

alert方法用於顯示一個帶有訊息和「確定」按鈕的簡單對話框。此方法對於向使用者顯示重要資訊或警告很有用。

句法:

alert(message);

例子:

alert("Hello, World!");

解釋:

  • 訊息: 要在對話方塊中顯示的文字。
  • alert 方法暫停腳本的執行,直到使用者點選「確定」按鈕。

用例:

// Display a welcome message
alert("Welcome to our website!");

2. 迅速的

prompt方法用於顯示對話框,提示使用者輸入一些文字。它會傳回使用者輸入的文本,如果使用者取消輸入,則傳回 null

句法:

prompt(message, default);

例子:

let userName = prompt("Please enter your name:", "Guest");
console.log("Hello, "   userName   "!");

解釋:

  • 訊息: 要在對話方塊中顯示的文字。
  • default: 輸入欄位中顯示的預設文字。此參數是可選的。
  • prompt方法傳回使用者輸入的文本,如果使用者取消輸入,則返回null

用例:

// Collect user input for their name
let userName = prompt("Please enter your name:", "Guest");
if (userName !== null) {
  console.log("Hello, "   userName   "!");
} else {
  console.log("No name entered.");
}

3. 確認

confirm方法用於顯示一個帶有訊息和兩個按鈕的對話框:「確定」和「取消」。如果使用者按一下“確定”,則傳回 true;如果使用者按一下“取消”,則傳回 false

句法:

confirm(message);

例子:

let isConfirmed = confirm("Are you sure you want to delete this item?");
if (isConfirmed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion canceled.");
}

解釋:

  • 訊息: 要在對話方塊中顯示的文字。
  • 如果使用者點擊“確定”,則confirm方法返回true;如果使用者點擊“取消”,則返回false

用例:

// Confirm an action before proceeding
let isConfirmed = confirm("Are you sure you want to delete this item?");
if (isConfirmed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion canceled.");
}

結合警報、提示和確認

您可以組合這些方法來創建更具互動性和動態的使用者體驗。這是一個示範如何一起使用所有三種方法的範例:

例子:

// Display a welcome message
alert("Welcome to our website!");

// Collect user input for their name
let userName = prompt("Please enter your name:", "Guest");
if (userName !== null) {
  console.log("Hello, "   userName   "!");

  // Confirm an action before proceeding
  let isConfirmed = confirm("Do you want to proceed?");
  if (isConfirmed) {
    console.log("Proceeding...");
  } else {
    console.log("Action canceled.");
  }
} else {
  console.log("No name entered.");
}

結論

alertpromptconfirm 方法是 JavaScript 中與使用者互動的強大工具。它們分別允許您顯示訊息、收集使用者輸入和確認操作。透過理解和使用這些方法,您可以建立更具互動性和動態的 Web 應用程式。

在下一篇部落格文章中,我們將更深入地探討在 JavaScript 中處理使用者輸入和事件。請繼續關注我們的 JavaScript 世界之旅!

版本聲明 本文轉載於:https://dev.to/codenextgen/interaction-in-javascript-alert-prompt-and-confirm-e80?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何在 Matplotlib 中建立自訂色彩圖並新增色標?
    如何在 Matplotlib 中建立自訂色彩圖並新增色標?
    建立自訂顏色圖並合併色標要建立自己的顏色圖,一種方法是利用 matplotlib.colors 模組中的 LinearSegmentedColormap 函數。這種方法更簡單,並產生連續的色標。 import numpy as np import matplotlib.pyplot as plt i...
    程式設計 發佈於2024-11-16
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-11-16
  • 如何用PHP取得客戶端的當地時間?
    如何用PHP取得客戶端的當地時間?
    在PHP 中檢索客戶端的本地時間在PHP 應用程式中處理日期和時間時,必須記住PHP 主要運行於伺服器端。因此,預設情況下,與時間相關的函數(如 date())會根據伺服器的位置和時區提供時間。但是,在需要捕獲客戶端(用戶)本地時間的情況下,需要採用替代方法。 這裡有一個使用 JavaScript ...
    程式設計 發佈於2024-11-16
  • 所有可變參數函數都會將“float”參數提升為“double”嗎?
    所有可變參數函數都會將“float”參數提升為“double”嗎?
    在可變參數函數中將浮點參數提升為Double在先前的討論中,注意到printf() 將會浮點參數提升為在接受之前加倍。這就提出了一個問題:所有可變參數函數都執行此提升嗎? 可變參數參數提升是的,根據 C99 和 C 標準,浮點參數傳遞給可變參數函數提升為雙精度。 標準規範C99(第6.5.2.2 節...
    程式設計 發佈於2024-11-16
  • MySQL 表悖論:如何修復既存在又不存在的表格?
    MySQL 表悖論:如何修復既存在又不存在的表格?
    薛丁格的MySQL表:存在之謎在資料庫管理領域,MySQL表可以表現出一種矛盾的存在。正如您所遇到的,表似乎同時存在和不存在的謎團可能會帶來令人沮喪的挑戰。讓我們深入研究根本問題並探索潛在的解決方案。 當遇到令人困惑的錯誤“表已存在”而“DROP TABLE”返回“未知表”時,很可能是表定義之間存在...
    程式設計 發佈於2024-11-16
  • 程式設計什麼時候需要三指針?
    程式設計什麼時候需要三指針?
    程式設計中的三重指標在各種程式語言中,指標是記憶體管理和間接尋址的強大工具。然而,什麼時候需要多層次的指標解引用,導致像三重指標(char***)這樣的結構? 三重指標的目的與優點雖然常規指標(char*) 保存變數的位址,但三重指標表示以下情況:char**foo 指向一個本身指向指標的指標cha...
    程式設計 發佈於2024-11-16
  • 你應該使用 MySQL 的 PASSWORD() 函數來進行密碼雜湊嗎?
    你應該使用 MySQL 的 PASSWORD() 函數來進行密碼雜湊嗎?
    MySQL 密碼函數注意事項對應用程式的密碼進行雜湊處理時,確定最佳方法至關重要。 MySQL 的密碼函數在這方面尤其重要,但其使用引起了爭議。 MySQL 密碼函數的優缺點使用 MySQL 的密碼函數有一些優點。它是一個內建函數,可以安全地處理散列和加鹽。然而,它也有潛在的缺點:使用限制: MyS...
    程式設計 發佈於2024-11-16
  • 為什麼C++不能像Java一樣直接回傳數組?
    為什麼C++不能像Java一樣直接回傳數組?
    為什麼C 不簡化陣列傳回類型雖然Java 等程式語言允許簡單的陣列傳回類型,但C 需要更複雜的方法。這不是任意的,而是源自於基本的語言設計決策。 內存管理和按值傳遞與按引用傳遞C 區分傳遞-按值傳遞和按引用傳遞。數組名本質上是指針。按值傳遞數組的結果是其第一個元素的記憶體位址,該位址在函數作用域之外...
    程式設計 發佈於2024-11-16
  • 回合製多人啤酒遊戲
    回合製多人啤酒遊戲
    由於我需要在不久的將來組織一個系統思維研討會,所以我需要一個啤酒遊戲來開始它。 啤酒遊戲本身由四個角色組成:零售商、批發商、經銷商和工廠。透過物流的時滯性質來理解系統視角,可以更好地理解系統邊界。 由於這是一個幾個小時的研討會,我希望這款啤酒遊戲能夠實現以下功能。 這是一款多人遊戲。 啤酒遊...
    程式設計 發佈於2024-11-16
  • 為什麼我的網站在 Mac 和 PC 上看起來不一樣?
    為什麼我的網站在 Mac 和 PC 上看起來不一樣?
    Mac 和PC 上的字體行高差異Mac 和PC 系統之間的字體渲染和行高差異問題可以透過一直令網頁設計師頭痛的問題。 HTML 和 CSS 對元素外部的行高提供有限的控制,這可能會導致在使用基於表格的佈局或使用特定字體時內容未對齊。 在所呈現的情況下,編碼設計旨在對齊訊息小部件垂直位於 div 中間...
    程式設計 發佈於2024-11-16
  • 為什麼 Go 中的空結構如此強大?
    為什麼 Go 中的空結構如此強大?
    理解 Go 中空結構體的使用空結構體,只是 Go 中的 struct{}類型,服務於一系列專門用途,並在優化程式碼效能並有效管理語言內的資料結構:屬性和優點:最小大小:空結構恰好佔用0 位元組內存,使得它們是Go 中最小的構建塊。 切片和通道優化: 空結構的切片和通道非常節省內存,因為Go 只存儲元...
    程式設計 發佈於2024-11-16
  • 為什麼我的文字區域看起來比其相鄰元素更高?
    為什麼我的文字區域看起來比其相鄰元素更高?
    Textarea 和相鄰元素對齊方式的差異:詳細說明儘管出現了這種情況,但代碼片段中的textarea 元素並未放置在更高的位置比它的鄰居,跨度元素。這種視覺錯覺源自於網頁版面的一個基本面,稱為基線對齊。 基線對齊和下降渲染內聯元素,例如跨度和文本區域在同一基線上,這是大多數角色所在的線。但是,某些...
    程式設計 發佈於2024-11-16
  • 如何使用 OpenCV 解決數位擷取過程中數獨方塊中的凸性缺陷?
    如何使用 OpenCV 解決數位擷取過程中數獨方塊中的凸性缺陷?
    使用OpenCV 解決數獨方塊中的凸性缺陷問題:在使用OpenCV 從數獨影像中提取數字的過程中,出現了差異數獨的真實邊界(紅線)和影像扭曲後的近似輪廓(綠線)之間。這種位移可能會影響OCR製程的準確性。 解決方案:1.影像調整:為了補償亮度變化,將每個像素除以閉運算的結果來調整影像的對比度。 2....
    程式設計 發佈於2024-11-16
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-16
  • 為什麼 C/C++ 中 `size_t` 是無符號的:歷史的必然還是現代的 bug 磁鐵?
    為什麼 C/C++ 中 `size_t` 是無符號的:歷史的必然還是現代的 bug 磁鐵?
    為什麼 size_t 無符號? Bjarne Stroustrup 的觀察結果是「使用無符號而不是int 來多獲得一位來表示正整數幾乎從來都不是一個好主意」引起了人們對將size_t 設為無符號的決定的擔憂。 歷史起源最初,size_t 是無符號的,以適應具有 16 位元指標的體系結構,例如 DOS...
    程式設計 發佈於2024-11-16

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3